<template>
  <!-- 重大技术方案策划表 -->
  <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :rules="editModel == 0 ? {} : rules">
    <a-spin :spinning="loading">
      <!-- 表单 -->
      <a-card>
        <title-name title="重大技术方案策划表"></title-name>

        <s-table bordered ref="table" size="default" rowKey="key" :columns="columns" :data="loadData" :alert="true" show-size-changer show-quick-jumper :showPagination="false">
          <template slot="action" slot-scope="text, record, index">
            <a-popconfirm title="确定要删除?" @confirm="() => delItem(index)">
              <a :disabled="editModel == 0">删除</a>
            </a-popconfirm>
          </template>
          <template v-for="col in ['name', 'planContent', 'principal', 'remark']" :slot="col" slot-scope="text, record">
            <div :key="col" class="form-item">
              <ASelectOrgPeople v-if="col === 'principal'" :disabled="editModel == 0" :init="false" :form="baseFormInfo" key-value="projectOrgId" option-key="id" v-model="record[col]"></ASelectOrgPeople>
              <BaseInput v-else :class="col === 'remark' ? 'remark' : ''" :maxLength="col == 'planContent' ? 1000 : 100" v-model="record[col]" :disabled="editModel == 0" />
            </div>
          </template>
        </s-table>
        <a-button :disabled="editModel == 0" type="primary" class="mt12" icon="plus" @click="addTable()"> 新增 </a-button>
      </a-card>
    </a-spin>
  </a-form-model>
   
</template>

<script>
import { api } from '@/api/projectManagementPlanning/majorProgramPlanningTable'
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import BSelect from '@/components/BComponents/BSelect'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 分公司
import ASelectOrgPeople from '@/components/Select/ASelectOrgPeople'
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    customRender(text, record, index) {
      return index + 1
    }
  },
  {
    title: '重大方案名称',
    dataIndex: 'name',
    width: '20%',
    scopedSlots: { customRender: 'name' }
  },

  {
    title: '方案内容',
    dataIndex: 'planContent',
    width: '30%',
    scopedSlots: { customRender: 'planContent' }
  },
  {
    title: '责任人',
    dataIndex: 'principal',
    width: '15%',
    scopedSlots: { customRender: 'principal' }
  },
  {
    title: '备注',
    dataIndex: 'remark',
    scopedSlots: { customRender: 'remark' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '5%',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'projectAuthorizationLetter',
  extends: new BaseEditPage(),
  components: {
    SelectProject,
    BSelect,
    SelectSubCompany,
    ASelectOrgPeople
  },
  props: {
    baseFormInfo: {
      // 是否作为审批详情
      type: Object,
      default: () => {}
    }
  },
  data() {
    this.columns = columns
    return {
      loading: false, // 加载控件
      visible: false, //人员选择控件
      editModel: 1, // 操作状态:0 查看;1 编辑
      form: { data: [] }, // 表单
      id: '',
      loadingBtn: {
        DELETE: false,
        DRAFT: false,
        SUBMITTED: false,
        REJECTED: false
      },
      loadData: () => {
        return new Promise((resolve, reject) => {
          resolve({
            data: this.form.data || []
          })
        })
      },
      update: api.updateList,
      rules: {}, // 校验规则
      init: false // 初始化控件
    }
  },
  watch: {},
  created() {},
  mounted() {
    // 不为添加时请求详情
    this.getDetailData()
  },

  methods: {
    addTable() {
      console.log(this.form)
      this.form.data.push({
        name: '',
        mainId: this.id,
        planContent: '',
        principal: '',
        remark: ''
      })
      this.$refs.table.refresh()
    },

    getDetailData() {
      this.loading = true
      api
        .getDetails({ id: this.id, version: this.$route.query.version || void 0 })
        .then((res) => {
          this.loading = false
          this.form = res
          console.log(this.form)
          this.$refs.table.refresh()
          this.$nextTick(() => {
            this.init = true
          })
        })
        .catch(() => {
          this.loading = false
        })
    },
    validateForm() {
      let flag = true
      if (this.form.data.length > 0) {
        this.form.data.forEach((i) => {
          if (!i.name || !i.planContent || !i.principal) {
            flag = false
          }
        })
        if (!flag) {
          tthis.$warning({
            title: '提示',
            content: '请将数据填写完整!',
            okText: '确定'
          })
        }
      } else {
        this.$warning({
          title: '提示',
          content: '请至少填写一行数据!',
          okText: '确定'
        })
        flag = false
      }

      return flag
    },
    delItem(index) {
      this.form.data.splice(index, 1)
      this.$refs.table.refresh()
    },
    majorProgramPlanningTableSaveDrafts() {
      this.handleSubmit(0)
    },
    majorProgramPlanningTableSubmit() {
      if (this.validateForm()) {
        this.handleSubmit(1)
      }
    },

    /**
     * 提交表单
     */
    handleSubmit(status) {
      let form = this.$clone(this.form)
      console.log(form)
      if (form.data.length == 0) {
        form.data.push({ mainId: this.id })
      }
      form.data[0].status = status
      if (status == 1) {
        this.handleSecondSub(form.data)
        return
      }
      this.loading = true
      api
        .updateList(form.data)
        .then(() => {
          this.loading = false
          this.$message.success(status == 'SUBMITTED' ? '提交成功！' : '保存成功')
          this.$multiTab.close()
        })
        .catch(() => {
          this.loading = false
          this.$message.warning(err.data.message)
        })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .form-item  {
  .ant-input:not([disabled]),
  .ant-select:not(.ant-select-disabled) .ant-select-selection,
  .ant-calendar-picker-input,
  .ant-input-number:not([disabled]),
  .ant-cascader-picker {
    border-color: #e4ac0b;
    background-color: #fff9e8;
  }
  .ant-input-disabled,
  .ant-input-number-disabled .ant-input-number-input,
  .ant-time-picker-input[disabled] {
    border-color: #d9d9d9 !important;
    background-color: #f5f5f5 !important;
  }
  .remark {
    .ant-input {
      border-color: inherit;
      background-color: initial;
    }
  }
}
</style>